<style lang="less">
  #sencondary-source-home-page {
    background: #3d3936 url(~@/assets/second-house-icon/two_house_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .secondarySourceList {
      background: #fff;
      position: relative;
      min-height: 120px;
      padding-top: 1em;
      display: flex;
      flex-direction: row;
      .content {
        width: 1190px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .list-wrapper {
          width: 800px;
          margin-right: 3em;
          .pagination{
            text-align: center;
            margin: 2em;
          }
          .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            &:after {
              content: "";
              width: 327px;
            }
            .item {
              width: 800px;
              display: flex;
              flex-direction: row;
              background: #f7f7f7;
              margin-bottom: 1em;
              padding: 1em;
              a.pic-link {
                width: 260px;
                height: 190px;
                margin-right: 2em;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              h2 {
                font-size: 160%;
              }
              .info {
                flex: 1;
                padding-right: 1em;
              }
              .detail {
                display: flex;
                justify-content: space-between;
                margin-top: 2em;
                .house-info {
                  line-height: 180%;
                  width: 80%;
                  font-size: 14px;
                  img {
                    max-width: 14px;
                    max-height: 14px;
                    vertical-align: middle;
                    margin-right: 5px;
                  }
                }
                ul {
                  line-height: 230%;
                }
                .price {
                  display: inline-block;
                  color: red;
                  font-size: 24px;
                  span{
                      font-size: 16px;
                      margin-left: 4px;                  
                  }
                }
                .unit_price {
                  margin: .5em 0;
                }
                .tag {
                  border: solid 1px #aaa;
                  padding: 3px 8px;
                }
              }
            }
          }
          .empty {
            font-size: 120%;
          }
        }
      }
    }
    .recommend-source {
      width: 350px;
    }
  }
</style>
<template>
  <div id="sencondary-source-home-page">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput tab="secondary"></GlobalSearchInput>
    </div>
    <FilterCategory :list="filters" @change="changeFilter"></FilterCategory>
    <div class="secondarySourceList" ref="list">
      <div class="content">
        <div class="list-wrapper">
          <div class="list">
            <div class="item" v-if="contentList.length<1" style="flex-direction: column">
              <p class="empty" v-if="contentList.length<1">{{spinShow ? '加载中...' : '暂无数据。'}}</p>
              <div>
                <Spin size="large" v-if="spinShow"></Spin>
              </div>
            </div>
            <div class="item" v-for="item in contentList">
              <router-link class="pic-link" :to="{name:'SecondarySourceDetail', params:{ id: item.houseNumber }}">
                <img v-if="item.coverPic" :src="item.coverPic | twoHouseListCoverPic" alt="">
                <img v-else :src="no_image" alt="">
              </router-link>
              <div class="info">
                <h2>{{item.centerSale | substring(0, 20)}}</h2>
                <div class="detail">
                  <div class="house-info">
                    <ul>
                      <li><img src="~@/assets//second-house-icon/house.svg" alt="">{{item.name}} | {{item.householdsType}} | {{item.buildArea}}㎡ | {{item.orientation}}
                      </li>
                      <li><img src="~@/assets/second-house-icon/address.svg" alt="">{{item.address}}</li>
                      <li><img src="~@/assets/second-house-icon/attention.svg"
                               alt="">{{item.attentionNumber}}关注/{{item.lookWithNumber}}次看房
                      </li>
                      <li><img src="~@/assets/second-house-icon/subway.svg" alt="">
                        <span class="tag">{{item.subway}}</span>
                        <span class="tag">随时看房</span>
                      </li>
                    </ul>
                  </div>
                  <div class="order">
                    <p class="price">{{item.price}}<span>万</span></p>
                    <p class="unit_price">单价{{item.unitPrice}}/㎡</p>
                    <p>
                      <Button v-appointment="`${item.id},${item.category}`" type="primary">预约看房</Button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <Page v-if="showPage"
                  :total="totalCount"
                  :pageSize="pageSize" :current="currentPage"
                  @on-change="changePagination"></Page>
          </div>
        </div>
        <RecommendSourceForNewHouse></RecommendSourceForNewHouse>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      FilterCategory: require('@/components/FilterCategory.vue'),
      RecommendSourceForNewHouse: require('@/components/RecommendSourceForNewHouse.vue'),
      PageFooter: require('@/components/PageFooter/index.vue'),
    },
    data () {
      return {
        totalCount: 0,
        currentPage: 1,
        pageSize: 12,
        showPage: false,
        keywords: '',
        params: {},
        spinShow: false,
        contentList: [],
        filters: require('./filter.config').default,
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/auto-orient/thumbnail/!260x190r/gravity/Center/crop/260x190/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/240/fill/I0Y5RjNGMw==/dissolve/100/gravity/NorthWest/dx/10/dy/10|imageslim'
      }
    },
    methods: {
      changeFilter (params) {
        this.params = params
        this.search()
      },
      changePagination (num) {
        this.currentPage = num
        this.search()
      },
      search () {
        this.spinShow = true
        this.contentList = []
        // 如果搜索条件为空，则显示推荐数据，需要显示分页
        this.showPage = this.searchParamsIsEmpty
        if (this.searchParamsIsEmpty) {
          api.secondarySource(this.currentPage).then((res) => {
            this.spinShow = false
            this.totalCount = res.data.totalPage * 12
            this.contentList = res.data.content
            setTimeout(() => {
              document.body.scrollTop = 0
            }, 0)
          }).catch(() => {
            this.spinShow = false
          })
        } else {
          // 否则调用另外一个借口
          api.secondarySourceSearch(this.params).then((res) => {
            this.spinShow = false
            this.contentList = res.data.content
          }).catch(() => {
            this.spinShow = false
          })
        }
      }
    },
    computed: {
      // 返回布尔值，判断是否搜索参数是否均为空
      searchParamsIsEmpty () {
        return Object.keys(this.params).every((key) => {
          return this.params[key] === ''
        })
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

